<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Trend Charts</title>

    <script src="frappe-charts.min.js"></script>
 
</head>

<body>
     
    <div>
        <div>
            <h6>趋势图</h6>
            <div id="chart-trends"></div>
        </div>
    </div>

    <script>
       
            //放置图表，图表为Trends Chart

            //定义图表数据
            let trends_data = {
                //横坐标，设置为标签
                labels: [1999, 2000, 2001, 2002, 2003, 2004,
                2005, 2006, 2007, 2008, 2009, 2010, 2011,
                2012, 2013, 2014, 2015, 2016, 2017],

            //数据集
            datasets: [
                {
                //柱状图上的数据，设置为值
                values: [1093997.267, 1211346.87, 1339395.719, 1470550.015, 1660287.966, 1955347.005, 2285965.892, 2752131.773,
                3552182.312, 4598206.091, 5109953.609, 6100620.489, 7572553.837, 8560547.315, 9607224.482, 10482372.11,
                11064666.28, 11190992.55, 12237700.48]
        }
    ]

};

    let plotChartArgs = {
        title: "中国GDP历年成长情形(单位:百万美元)",//图表标题
        data: trends_data,//图表数据
        type: 'line',
        height: 300,
        colors: ['#ff00ff'],
        
        lineOptions: {
        hideDots: 0,//隐藏点
        heatline: 0,
        regionFill: 1,
        hideLine: 0//隐藏行
    },

    axisOptions: {
        xAxisMode: 'tick', //x轴线 隐藏
        yAxisMode: 'span',//y轴线  显示
        xIsSeries: 1 //设置多组数据的显示来自
    }

    };

    let chart = new frappe.Chart("#chart-trends", plotChartArgs);
        chart.render();
    </script>
</body>
</html>
